<template>
    <div 
        :class="curClassName"
    >
        <div class="left">
            <div>
                <div class="msgContent">
                    {{ msg }}
                </div>
                <div class="time">
                    {{ moment(sendTime).format('YYYY-MM-DD HH:mm:ss') }}
                </div>
            </div>
        </div>
        <div class="right">
            <span class="userName" :title="userName">{{ userName }}</span>
            <div class="wrapper">
                <span class="headPic"></span>
            </div>
        </div>
    </div>
</template>

<script>
import { isCurrentUser } from '@/utils/user'
import moment from 'moment'
export default {
    name: 'UserWithMsg',
    mounted(){
        this.isCurUser = isCurrentUser(this.userId)
    },
    data(){
        return {
            isCurUser: false,
            moment: moment
        }
    },
    computed:{
        curClassName: function(){
            return this.isCurUser ? 'userWithMsg' : 'notCurWrapper'
        }
    },
    props: {
        msg: String,
        userName: String,
        userId: Number,
        sendTime: Number
    }
}
</script>

<style lang="less" scoped>

    .notCurWrapper {
        display: flex;
        padding-left: 24px;
        margin-top: 24px;
        flex-direction: row-reverse;

        .left {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-right: 10%;
            padding-left: 10px;
            .msgContent {
                padding: 10px;
                background: rgb(211, 140, 59);
                color: #fff;
                border-radius: 4px;
                font-size: 12px;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    border: 5px solid rgb(211, 140, 59);
                    left: -9px;
                    top: 10px;
                    border-top-color: transparent;
                    border-left-color: transparent;
                    border-bottom-color: transparent;
                }
            }
            .time {
                font-size: 12px;
                color: #ccc;
            }
        }
        .right {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;
            .userName {
                color: #333;
                font-size: 12px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .wrapper {
                text-align: center;
            }
            .headPic {
                display: inline-block;
                width: 38px;
                height: 38px;
                background: rgb(32, 17, 88);
                margin-top: 4px;
                border-radius: 19px;
            }
        }
    }

    .userWithMsg {
        display: flex;
        padding-right: 24px;
        margin-top: 24px;
        .left {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-left: 10%;
            padding-right: 10px;
            .msgContent {
                padding: 10px;
                background: rgb(32, 17, 88);
                color: #fff;
                border-radius: 4px;
                font-size: 12px;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    border: 5px solid rgb(32, 17, 88);
                    right: -9px;
                    top: 10px;
                    border-top-color: transparent;
                    border-right-color:transparent ;
                    border-bottom-color: transparent;
                }
            }
            .time {
                font-size: 12px;
                color: #ccc;
            }
        }
        .right {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;
            .userName {
                color: #333;
                font-size: 12px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .wrapper {
                text-align: center;
            }
            .headPic {
                display: inline-block;
                width: 38px;
                height: 38px;
                background: rgb(32, 17, 88);
                margin-top: 4px;
                border-radius: 19px;
            }
        }
    }
</style>